<template>
  <div class="all">
    <div id="videoBack" class="henanCehui">
      <video ref="video" autoplay loop muted>
        <source src="https://img3.job1001.com/position/indexBg2.mp4" type="video/mp4" />
      </video>
    </div>
    <div id="app-container">
      <div class="experience-time" v-if="dateType == '30' || dateType == '40'">
        体验时间
        <div class="time" v-if="leftTime < 86400">
          <div class="time-box">{{ timeHour }} 时</div>
          <div class="dot">
            <div></div>
            <div></div>
          </div>
          <div class="time-box">{{ timeMin }} 分</div>
          <div class="dot">
            <div></div>
            <div></div>
          </div>
          <div class="time-box">{{ timeSec }} 秒</div>
        </div>
        <div v-else class="time">剩余{{ leftDays }}天</div>
      </div>
      <!-- 标题和搜索框之类的，包含河南测绘学院特殊处理(后端的主意) -->
      <!-- 如果你改动了以下template的内容，会牵扯很多东西，一定要看onscroll事件的逻辑是否被正常触发 -->
      <template>
        <div id="top" class="henanCehui" @click.stop="showGlass ? null : handleTopClick()">
          <!-- <div
            id="mine"
            class="mine"
            @click.stop="showGlass ? null : handleMine()"
            v-if="true"
          >
            <span>我的</span>
            <img
              class="avator"
              src="https://img3.job1001.com/data_center/mine/avator.png"
              alt=""
            />
          </div> -->
          <mineAvatar :isMine="false" v-if="!hideMine" />
        </div>
        <div id="title" @click="showGlass ? null : handleTopClick()">
          <!-- <img :src="titleCustomerImg" class="titleCustomerImg" /> -->
          <div class="titleCustomerName">
            {{ customerDesc }}
          </div>
        </div>
        <div class="topTitle" @click="showGlass ? null : handleTopClick()">
          <img v-if="SecretKey != '94cbe78f3bcec8be2a4b0ac87a31ba7c'" class="pic" :src="customerImg" />
          <!-- 字段名字比较特殊 -->
          <div v-else class="pic"></div>
        </div>
        <div class="topDesc" @click="showGlass ? null : handleTopClick()">
          <img v-if="SecretKey == '94cbe78f3bcec8be2a4b0ac87a31ba7c'" class="pic" :src="customerImg" alt="" />
          <span>{{ customerDesc }}</span>
        </div>
        <searchBox ref="searchBox" :height="searchBoxHeight" :clickInputOutside="clickInputOutside"
          @getInputData="getInputData"></searchBox>
      </template>
      <!-- <template v-else>
        <div id="top" @click.stop="showGlass ? null : handleTopClick()">
          <img v-if="customerImg" :src="customerImg" />
        </div>
        <div id="title" @click="showGlass ? null : handleTopClick()">
          <img
            :src="titleCustomerIcon || customerImg"
            class="titleCustomerImg"
          />
          <div class="titleCustomerName">
            {{ titleCustomerIcon ? "就业创业职业大全云平台" : customerName }}
          </div>
        </div>
        <div
          class="topTitle"
          :style="{ marginTop: showMine ? '-42px' : '6px' }"
          @click="showGlass ? null : handleTopClick()"
        >
          {{ customerImg ? '就业创业职业大全云平台' : customerName }}
        </div>
        <searchBox
          ref="searchBox"
          :height="searchBoxHeight"
          :clickInputOutside="clickInputOutside"
          @getInputData="getInputData"
        ></searchBox>
      </template> -->
      <!--
        主要页面功能,一下页面的元素多少都要设置z-index,否则会被#videoBack覆盖
        z-index真的很重要！不要乱设置！因为要实现效果会各种覆盖！
      -->
      <!-- tab栏 -->
      <div class="main-tabs">
        <!-- 如果你要新增，需要做出以下调整：
              1.获取UI图上的宽度，修改:style="width:179px"的值；
              2.修改viewBox的第三个值；
              3.修改rect的width；
          -->
        <div :class="{
            'main-tabs-item': true,
            'main-tabs-item-active': showType == 'position',
          }" @click="showGlass ? null : changeShowType('position')" :style="{ width: '179px', height: '64px' }">
          <svg class="gradient-border" viewBox="0 0 179 66" v-if="showType == 'position'">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: #94aad8; stop-opacity: 1" />
                <stop offset="100%" style="stop-color: #253f7a; stop-opacity: 1" />
              </linearGradient>
            </defs>
            <rect x="1" y="1" width="179" height="64" rx="10" ry="10" fill="none" stroke="url(#grad1)"
              stroke-width="1.17" />
            <image x="17" y="12" width="30" height="30" :href="mainTablsItemIcon" />
            <text x="52" y="50%" fill="#e9f0f1" font-size="17px" font-weight="bold"
              font-family="PingFang-SC, PingFang-SC">
              专业匹配职业
            </text>
          </svg>
          <span class="main-tabs-item-text" v-else> 专业匹配职业 </span>
        </div>
        <div v-if="showPositionJob == '1'" :class="{
            'main-tabs-item': true,
            'main-tabs-item-active': showType == 'campus',
          }" @click="showGlass ? null : changeShowType('campus')" :style="{ width: '141px', height: '64px' }">
          <svg class="gradient-border" viewBox="0 0 144 66" v-if="showType == 'campus'">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: #94aad8; stop-opacity: 1" />
                <stop offset="100%" style="stop-color: #253f7a; stop-opacity: 1" />
              </linearGradient>
            </defs>
            <rect x="1" y="1" width="142" height="64" rx="10" ry="10" fill="none" stroke="url(#grad1)"
              stroke-width="1.7" />
            <image x="17" y="12" width="30" height="30" :href="mainTablsItemIcon" />
            <text x="52" y="50%" fill="#e9f0f1" font-size="17px" font-weight="bold"
              font-family="PingFang-SC, PingFang-SC">
              校招岗位
            </text>
          </svg>
          <span class="main-tabs-item-text" v-else> 校招岗位 </span>
        </div>
        <!-- 校园体验版增加考公岗位 -->
        <div v-if="showCivil == '1'" :class="{
            'main-tabs-item': true,
            'main-tabs-item-active': showType == 'civil',
          }" @click="showGlass ? null : changeShowType('civil')" :style="{ width: '141px', height: '64px' }">
          <svg class="gradient-border" viewBox="0 0 144 66" v-if="showType == 'civil'">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: #94aad8; stop-opacity: 1" />
                <stop offset="100%" style="stop-color: #253f7a; stop-opacity: 1" />
              </linearGradient>
            </defs>
            <rect x="1" y="1" width="142" height="64" rx="10" ry="10" fill="none" stroke="url(#grad1)"
              stroke-width="1.7" />
            <image x="17" y="12" width="30" height="30" :href="mainTablsItemIcon" />
            <text x="52" y="50%" fill="#e9f0f1" font-size="17px" font-weight="bold"
              font-family="PingFang-SC, PingFang-SC">
              考公考编
            </text>
          </svg>
          <span class="main-tabs-item-text" v-else> 考公考编 </span>
        </div>
        <!-- 校园体验版增加校招岗位分析 -->
        <div v-if="showEnterpriseAnalysis == '1'" :class="{
            'main-tabs-item': true,
            'main-tabs-item-active': showType == 'company',
          }" @click="showGlass ? null : changeShowType('company')" :style="{ width: '141px', height: '64px' }">
          <svg class="gradient-border" viewBox="0 0 144 66" v-if="showType == 'company'">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: #94aad8; stop-opacity: 1" />
                <stop offset="100%" style="stop-color: #253f7a; stop-opacity: 1" />
              </linearGradient>
            </defs>
            <rect x="1" y="1" width="142" height="64" rx="10" ry="10" fill="none" stroke="url(#grad1)"
              stroke-width="1.7" />
            <image x="17" y="12" width="30" height="30" :href="mainTablsItemIcon" />
            <text x="52" y="50%" fill="#e9f0f1" font-size="17px" font-weight="bold"
              font-family="PingFang-SC, PingFang-SC">
              企业分析
            </text>
          </svg>
          <span class="main-tabs-item-text" v-else> 企业分析 </span>
        </div>
        <!-- 跳转按钮 -->
        <div v-if="showJumpBtn" :class="{
            'main-tabs-item': true,
          }" @click="jumpToThirdTitle" :style="{ width: '141px', height: '64px' }">
          <span class="main-tabs-item-text"> {{ jumpInfo.title }} </span>
        </div>
      </div>
      <!-- 切换显示的主体页面 -->
      <template v-if="showType == 'position'">
        <depFilterList ref="depFilterListRef" @selectedChecks="selectedChecks"></depFilterList>
        <div class="main">
          <searchList ref="searchListRef" :SecretKey="SecretKey" :positionList="positionList"
            :selectedClass="selectedClass"></searchList>
          <hotJob :hotPositionList="hotPositionList" ref="hotJobRef"></hotJob>
        </div>
      </template>
      <!-- 下面的结构和上面的不一样哦 -->
      <template v-else-if="showType == 'campus'">
        <jobFilter ref="jobFilterRef" @selectedJobChecks="selectedJobChecks"></jobFilter>
        <div class="main">
          <jobSearchList ref="searchListRef" :SecretKey="SecretKey" :positionList="positionList"
            :selectedJobClass="selectedJobClass"></jobSearchList>
          <jobSearchSide :hotPositionList="hotPositionList" ref="hotJobRef"></jobSearchSide>
        </div>
      </template>
      <!-- 考公岗位 -->
      <template v-else-if="showType == 'civil'">
        <civilJobFilter ref="jobFilterRef" @getYears="handleGetYears" @selectedCivilJobChecks="selectedCivilJobChecks">
        </civilJobFilter>
        <div class="main civilMain">
          <civilJobSearchList ref="searchListRef" :yearList="yearList" :SecretKey="SecretKey"
            :selectedCivilJobClass="selectedCivilJobClass" v-if="selectedCivilJobClass['civilType'][0] == 1">
          </civilJobSearchList>
          <civilTeacherSearchList ref="searchListRef" :yearList="yearList" :SecretKey="SecretKey"
            :selectedCivilJobClass="selectedCivilJobClass" v-else-if="selectedCivilJobClass['civilType'][0] != 1">
          </civilTeacherSearchList>
          <jobSearchSide :hotPositionList="hotPositionList" ref="hotJobRef" :showMoreButton="true"></jobSearchSide>
        </div>
      </template>
      <!-- 企业分析 -->
      <template v-if="showType == 'company'">
        <depCompanyFilterList ref="depCompanyFilterListRef" @selectedCompanyChecks="selectedCompanyChecks">
        </depCompanyFilterList>
        <div class="main">
          <companySearchList ref="searchListCompanyRef" :SecretKey="SecretKey" :positionList="positionList"
            :selectedCompanyClass="selectedCompanyClass"></companySearchList>
          <hotJob :hotPositionList="hotPositionList" ref="hotJobRef"></hotJob>
        </div>
      </template>

      <div class="question" v-if="!showButtons">
        <div class="part" @click="questionOpen = true">
          <img src="../../assets/home/questionIcon.png" />
          <span>问题反馈</span>
        </div>
        <div class="part" @click="appletOpen = true">
          <img src="../../assets/home/appletIcon.png" />
          <span>小程序</span>
        </div>
      </div>
      <el-dialog class="questionDialog" title="意见反馈" :visible.sync="questionOpen" width="574px">
        <div>建议您扫码添加专员反馈意见，以便更好的帮助您解决问题</div>
        <div class="erweimaBox">
          <img src="../../assets/home/erweima1.png" />
          <img src="../../assets/home/erweima2.png" />
        </div>
        <div class="erweimaName">
          <div>严专员</div>
          <div>黄专员</div>
        </div>
      </el-dialog>
      <el-dialog title="一览职业小程序" :visible.sync="appletOpen" width="274px">
        <div>微信扫码进入一览职业大全</div>
        <div class="erweimaBox">
          <img src="../../assets/home/applet.png" />
        </div>
        <div class="erweimaName">
          <div style="margin: 0">一览职业大全</div>
        </div>
      </el-dialog>
      <el-dialog title="我的关注" :visible.sync="collectDialog" width="900px" class="collectDialog" @close="closeEdit">
        <div class="edit" @click="clickEdit">
          <p>{{ isEdit ? "退出编辑" : "编辑" }}</p>
        </div>
        <div class="collectList">
          <div class="careerItem" v-for="(itemThird, indexThird) in collectList" :key="itemThird.positionId"
            @click="routerToDetail(itemThird, indexThird)" :class="isEdit ? 'careerItemRed' : ''">
            <div class="careerName">
              {{ itemThird.positionName }}
              <div class="del" v-if="isEdit">×</div>
            </div>
            <div class="careerCate">
              {{ `${itemThird.topName} · ${itemThird.parentName}` }}
            </div>
            <div class="careerCategory">
              <div>
                {{ `${itemThird.positionDesc || "暂无描述"}` }}
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="更新公告" :visible.sync="updateOpen" width="574px">
        <div>以下是最近的一次版本更新内容：</div>
        <p class="updateMessage">{{ updateMessage }}</p>
      </el-dialog>
    </div>
    <div class="glass" v-if="showGlass && (dateType == '30' || dateType == '40')">
      <div class="wx-card">
        <div class="title">
          <img :src="ztLogo" alt="" />
          <span>一览就业创业职业大全云平台</span>
        </div>
        <div class="desc">你的体验时间已到,如需续用,请联系工作人员</div>
        <div class="wx">
          <img :src="wxImg" alt="" v-if="wxImg" />
        </div>
        <div class="name">{{ contactName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { autoRegister, getPersonIdByOAId } from "@/api/mine";
import searchBox from "./components/searchBox";
import filterList from "./components/filterList";
import depFilterList from "./components/depFilterList";
import depCompanyFilterList from "./components/depCompanyFilterList";
import jobFilter from "./components/jobFilter";
import searchList from "./components/searchList";
import companySearchList from "./components/companySearchList";
import jobSearchList from "./components/jobSearchList";
import civilJobFilter from "./components/civilJobFilter";
import civilJobSearchList from "./components/civilJobSearchList";
import civilTeacherSearchList from "./components/civilTeacherSearchList";
import hotJob from "./components/hotJob/index";
import jobSearchSide from "./components/jobSearchSide/index";
import {
  getUpdateNotice,
  collectPositionList,
  getCustomerInfoInterface,
  campusJobTrads,
} from "@/api/home";
import { delPositionCollect, getDate } from "@/api/position-detail";
import mainTablsItemIcon from "@/assets/home/mainTablsItemIcon.png";
import mineAvatar from "./components/mineAvatar";

export default {
  components: {
    searchBox,
    filterList,
    depFilterList,
    depCompanyFilterList,
    searchList,
    companySearchList,
    hotJob,
    jobFilter,
    jobSearchList,
    jobSearchSide,
    civilJobFilter,
    civilJobSearchList,
    mineAvatar,
    civilTeacherSearchList,
  },
  name: "home",
  computed: {
    showType() {
      return this.$store.state.settings.showType;
    },
  },
  data() {
    return {
      showJumpBtn: false, // 用来判断是否显示后端配置的跳转tab按钮
      showCivil: "",
      showPositionJob: "",
      showEnterpriseAnalysis: "",
      dateType: "10",
      leftDays: 0,
      timeHour: "0",
      timeMin: "0",
      timeSec: "0",
      leftTime: 0,
      ztLogo: require("../../assets/home/zt-logo.png"),
      wxImg: require("../../assets/home/ty-wx.png"),
      showGlass: false,
      SecretKey: "",
      customerDesc: "",
      customerName: "",
      titleCustomerImg: "",
      sassCustomerName: "", //通过sass那边传入的
      customerImg: "",
      showButtons: false,
      isEdit: false,
      collectList: [],
      collectDialog: false,
      updateMessage: "",
      inputData: "",
      clickInputOutside: false,
      positionList: [],
      yearList: "",
      orderList: [],
      hotPositionList: [],
      selectedClass: [],
      selectedJobClass: {
        zpTrade: [],
        salary: [],
        gznum: ["-1||0"],
        eduId: [],
        regionid: ["100000-全国"],
      },
      selectedCivilJobClass: {
        politicalStatus: [],
        edu: [],
        year: [],
        regionId: ["100000-全国"],
        civilType: [1],
        recruitmentStatus: [],
        date: [],
      },
      selectedCompanyClass: [],
      questionOpen: false,
      appletOpen: false,
      updateOpen: false,
      careerTagIds: [],
      mainTablsItemIcon,
      titleCustomerNameWidth: 0, //固定顶部的标题名字的宽度
      titleCustomerIcon: "",
      searchBoxHeight: "82px",
      showMine: false,
      isShowPosition: true,
      dialogTableVisible: false,
      hideMine: false,
    };
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener("scroll", this.onScroll);
  },
  created() {
    var mobile = localStorage.getItem("mobile");
    if (localStorage.getItem("userInfo")) {
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      mobile = userInfo.mobile;
    }
    if (mobile) {
      this.autoRegisterFn(); //通过手机号获取personId，通常情况下适用
    } else {
      this.reqGetPersonIdByOAId(); // 通过OAId获取personId，适用于OA系统
    }
    if (this.$route.query.SecretKey || localStorage.getItem("SecretKey")) {
      this.showButtons = true;
      let SecretKey =
        this.$route.query.SecretKey || localStorage.getItem("SecretKey");
      localStorage.setItem("SecretKey", SecretKey);
      this.SecretKey = SecretKey;
      //河南测绘学院隐藏校招岗位
      if (SecretKey == "94cbe78f3bcec8be756042d1554c13b5") {
        this.isShowPosition = false;
      }
    } else {
      let SecretKey = "94cbe78f3bcec8be2a4b0ac87a31ba7c";
      localStorage.setItem("SecretKey", SecretKey);
      this.SecretKey = SecretKey;
      // 94cbe78f3bcec8be756042d1554c13b5 河南测绘
    }
    if (this.$route.query.customerName) {
      this.sassCustomerName = this.$route.query.customerName;
    }
    this.getCustomerInfo();
    localStorage.setItem("superToken", this.$route.query.superToken || "");
    this.reqGetUpdateNotice();
    //如果没有保存过行业信息，则请求接口获取
    if (!localStorage.getItem("campusJobTrads")) {
      this.reqCampusJobTrads();
    }
    //如果sessionStorage有switchToCampus，就直接切换tab
    if (sessionStorage.getItem("switchToCampus")) {
      this.changeShowType("campus");
      sessionStorage.removeItem("switchToCampus");
    }
    if (
      this.showType == "campus" ||
      this.showType == "civil" ||
      this.showType == "company"
    ) {
      this.searchBoxHeight = "0";
    }
    //当localStorage中有userInfo的时候,设置roleType=20,which means 老师在登录
    if (localStorage.getItem("userInfo")) {
      localStorage.setItem("roleType", "20");
    }
    //当localStorage中有userInfo的时候,设置roleType=20,which means 老师在登录
    if (localStorage.getItem("userInfo")) {
      localStorage.setItem("roleType", "20");
    }
  },
  mounted() {
    window.addEventListener("click", this.listenerChangeFlag);
    window.addEventListener("scroll", this.onScroll);
    this.$refs.video.playbackRate = 0.4;
    setTimeout(() => {
      // 先请求拿到personId，再请求拿到过期日期
      this.getDateFn();
    }, 1000);
  },
  beforeDestroy() {
    window.removeEventListener("click", this.listenerChangeFlag);
  },
  methods: {
    jumpToThirdTitle() {
      window.open(this.jumpInfo.url, "_blank");
    },
    async reqGetPersonIdByOAId() {
      const userInfo = JSON.parse(localStorage.getItem("userInfo")); //OA的userInfo和SaaS登录的userInfo不一样
      const oaId = userInfo.user_source_id;
      const params = {
        oaId,
      };
      const res = await getPersonIdByOAId(params);
      if (res.code == 200) {
        localStorage.setItem("personId", res.data);
        localStorage.setItem("uid", res.data); //???
      }
    },
    async autoRegisterFn() {
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      const mobile = localStorage.getItem("mobile");
      const params = {
        mobile: mobile ? mobile : userInfo.mobile,
      };
      const res = await autoRegister(params);
      if (res.code == 200) {
        localStorage.setItem("personId", res.data.personId);
        localStorage.setItem("uid", res.data.uid);
      }
    },
    async getDateFn() {
      const params = {};
      const roleType = localStorage.getItem("roleType") || "10";
      if (roleType == "10") {
        //  学生
        params.roleType = roleType;
        params.personId = localStorage.getItem("personId") || "";
      } else {
        //老师
        params.saasId =
          JSON.parse(localStorage.getItem("userInfo")).admin_id ||
          "100000000000001";
      }
      // console.log("getDateFn---------detail-------->params", params);
      const res = await getDate(params);
      if (res.code == 200) {
        this.dateType = res.data.resType;
        this.contactName = res.data.contactName || "";
        this.wxImg = res.data.contactQrCode;
        const backendTimeString = res.data.endTime;
        // 将时间字符串转换为Date对象
        const backendTime = new Date(backendTimeString);
        // 获取当前时间的Date对象
        const currentTime = new Date();
        // 计算两个时间之间的毫秒差异
        const differenceInMillis =
          backendTime.getTime() - currentTime.getTime();
        // 将毫秒转换为秒
        const differenceInSeconds = (differenceInMillis / 1000).toFixed(0);
        this.leftDays = (differenceInSeconds / 86400).toFixed(0);
        this.startCountdown(differenceInSeconds);
      }
    },
    startCountdown(seconds) {
      this.leftTime = seconds; // 设置剩余时间
      const updateTimer = () => {
        this.timeHour = Math.floor(this.leftTime / 3600)
          .toString()
          .padStart(2, "0");
        this.timeMin = Math.floor((this.leftTime % 3600) / 60)
          .toString()
          .padStart(2, "0");
        this.timeSec = (this.leftTime % 60).toString().padStart(2, "0");

        if (this.leftTime <= 0) {
          clearInterval(this.interval); // 使用 this.interval 来引用定时器
          this.interval = null; // 清除定时器引用
          if (this.dateType == "30" || this.dateType == "40") {
            this.showGlass = true; // 时间到了就展示蒙层
          }
          this.timeHour = "00";
          this.timeMin = "00";
          this.timeSec = "00";
        } else {
          this.leftTime--; // 减少剩余秒数
        }
      };

      this.interval = setInterval(updateTimer, 1000); // 将 interval 保存在组件的数据属性中
    },
    changeShowType(value) {
      this.$store.dispatch("settings/changeSetting", {
        key: "showType",
        value: value,
      });
      this.searchBoxHeight = value == "position" ? "82px" : "0";
      switch (value) {
        case "position":
          this.$bus.$emit("generalReportAction", {
            etId: 40037,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
          });
          break;
        case "campus":
          this.$bus.$emit("generalReportAction", {
            etId: 40038,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
          });
          break;
        case "civil":
          this.$bus.$emit("generalReportAction", {
            etId: 40039,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
          });
          break;

        default:
          break;
      }
    },
    reqCampusJobTrads() {
      campusJobTrads({}).then((res) => {
        if (res.code == 200) {
          localStorage.setItem("campusJobTrads", JSON.stringify(res.data));
        }
      });
    },
    getCustomerInfo() {
      getCustomerInfoInterface({}).then((res) => {
        // console.log("---------->getCustomerInfoInterface", res.data.extra);

        if (res.code == 200) {
          this.customerDesc =
            res.data.customerDesc ||
            res.data.customerName ||
            this.sassCustomerName ||
            "职业大全";
          this.customerImg = res.data.customerPic || "";
          document.title = this.customerDesc;
          this.customerName = res.data.customerName;
          localStorage.setItem("customerName", this.customerName);
          localStorage.setItem("customerDesc", this.customerDesc);
          localStorage.setItem("cardType", res.data.cardType || 28);
          this.$store.dispatch("user/setCardType", res.data.cardType || 28);
          //保存extra中的regionId到vuex中
          if (res.data.extra) {
            const extra = JSON.parse(res.data.extra);
            this.$store.dispatch("user/setRegionId", extra.regionId);
            localStorage.setItem("extra", res.data.extra);
            this.titleCustomerIcon = extra.icon;
            this.showCivil = extra.civil;
            this.showPositionJob = extra.positionJob;
            this.showEnterpriseAnalysis = extra.enterpriseAnalysis;
            this.showJumpBtn = extra.thirdH5 ? true : false;
            this.jumpInfo = extra.thirdH5;
            this.hideMine = extra.hideMine;
          } else {
            localStorage.removeItem("extra");
          }
        }
      });
    },
    handleTopClick() {
      console.log("----------handleTopClick--------");
      //关闭所有弹窗toolltips
      this.$refs.depFilterListRef.closeTooltips();
      this.$refs.depCompanyFilterListRef.closeTooltips();
      const playbackRate = this.$refs.video.playbackRate;
      if (playbackRate == 0) {
        this.$refs.video.playbackRate = 0.45;
      } else {
        this.$refs.video.playbackRate = 0;
      }
    },
    clickEdit() {
      if (this.isEdit) {
        this.isEdit = false;
      } else {
        this.isEdit = true;
      }
    },
    closeEdit() {
      this.isEdit = false;
    },
    routerToDetail(item, index) {
      if (this.isEdit) {
        delPositionCollect({
          positionId: item.positionId,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "取消关注" + item.positionName,
            });
            this.collectList = this.collectList.filter((coll) => coll !== item);
            //取消收藏时更新我的收藏的收藏状态
            this.$refs.hotJobRef.getCollectPositionList();
            //取消收藏时更新大列表的收藏状态
            this.$refs.searchListRef.updateSearchListCollect(item);
          }
        });
      } else {
        let param = {
          valueId: item.positionId,
          navName: item.positionName,
          collect: "true",
        };

        this.$refs.searchListRef.clickItem(param);
      }
    },
    openCollectDialog() {
      this.collectDialog = true;
      collectPositionList({
        searchPhotoType: 1,
        page: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.collectList = res.data;
        }
      });
    },
    reqGetUpdateNotice() {
      const params = { platform: 0 };
      getUpdateNotice(params).then((res) => {
        if (!res.data) return;
        const nowId = localStorage.getItem("updateNoticeId");
        const isIdSmaller = (nowId && nowId) < res.data.id;
        const isAfterThreeDay =
          new Date(res.data.createTime).getTime() <
          new Date().getTime() - 3 * 24 * 60 * 60 * 1000;

        if (isIdSmaller && !isAfterThreeDay) {
          this.updateOpen = true;
          this.updateMessage = res.data.description;
          localStorage.setItem("updateNoticeId", res.data.id);
        }
      });
    },
    onScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let headTitle = document.getElementById("title");
      let historyWords = document.getElementsByClassName("historyWords")[0];

      if (
        document.documentElement.scrollHeight - window.innerHeight <=
        scrollTop + 20
      ) {
        this.$store.dispatch("settings/changeSetting", {
          key: "canScroll",
          value: true,
        });
      } else {
        this.$store.dispatch("settings/changeSetting", {
          key: "canScroll",
          value: false,
        });
      }

      if (scrollTop > 120) {
        headTitle.style.opacity = "1";
        headTitle.style.backgroundColor = "rbga(255,255,255, 0.26)";
        headTitle.style.backdropFilter = "blur(6px)";
        setTimeout(() => {
          //titleCustomerName，需要根据很多元素来计算长度
          const titleCustomerName =
            document.querySelector(".titleCustomerName");
          //1.获取可视窗口的宽度
          const windowWidth = window.innerWidth - 17;
          // //console.log("windowWidth", windowWidth);
          //2.两个输入框的宽度
          const searchBoxInner = document.querySelector(".searchBoxInner");
          const contentWidth = searchBoxInner.clientWidth * 2;
          // //console.log("contentWidth", contentWidth);

          //3.计算差值，然后/2
          const diff = windowWidth - contentWidth;
          // //console.log("diff", diff);
          //4.去掉titleCustomerImg的宽度，然后去掉padding的值，25
          const titleCustomerImg = document.querySelector(".titleCustomerImg");
          if (!titleCustomerImg) return;
          const titleCustomerImgWidth = titleCustomerImg.clientWidth;
          // //console.log("titleCustomerImgWidth", titleCustomerImgWidth);

          if (!titleCustomerImgWidth) return;
          //5.计算titleCustomerName的宽度
          this.titleCustomerNameWidth = diff / 2 - titleCustomerImgWidth - 25;
          titleCustomerName.style.width = `${this.titleCustomerNameWidth}px`;
          // //console.log("最后结果：", this.titleCustomerNameWidth);
        }, 300);
      } else {
        headTitle.style.backdropFilter = "none";
        headTitle.style.backgroundColor = "";
        headTitle.style.boxShadow = "none";
        headTitle.style.opacity = "0";
      }
      if (scrollTop > 150) {
        if (historyWords) {
          // historyWords.style.opacity = "0";
          historyWords.style.display = "none";
        }
      } else {
        if (historyWords) {
          historyWords.style.opacity = "1";
          historyWords.style.display = "flex";
        }
      }
    },
    listenerChangeFlag(e) {
      let nowClassName = e.target.className;
      if (nowClassName != "search" && nowClassName != "el-input__inner") {
        this.$refs.searchBox.clickInputOutside();
      }
    },
    selectedChecks(value) {
      //将filter里获取到的选项送到菜单处
      this.selectedClass = value;
      // console.log("this.selectedClass", this.selectedClass);

      //通知列表默认为第一项，同时返回第一项三级数据
      // this.$refs.searchListRef.reqGetDefaultPositionTree();
    },
    selectedCompanyChecks(value) {
      //将filter里获取到的选项送到菜单处
      // console.log("--------selectedCompanyChecks---------->",value);
      this.selectedCompanyClass = value;
    },
    selectedJobChecks(value) {
      this.selectedJobClass = value;
    },
    selectedCivilJobChecks(value) {
      this.selectedCivilJobClass = value;
    },
    handleGetYears(value) {
      const temp = [];
      value.forEach((item) => {
        temp.push(item.value);
      });
      this.yearList = temp.join("_");
    },
    //获取职位列表
    getSearchList() {
      let params = {};
    },
    getInputData(inputData) {
      this.inputData = inputData;
      //console.log("搜索");
      this.getSearchList();
    },
  },
};
</script>

<style lang="scss"></style>

<style scoped lang="scss">
.all {
  background: #f7f8fa;
  position: relative;
  min-width: 1000px;
  .glass {
    width: 100%;
    height: 100%;
    background: rgba(22, 22, 22, 0.6);
    backdrop-filter: blur(3px);
    position: absolute;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 20%;
    .wx-card {
      width: 361px;
      height: 316px;
      background-image: url("../../assets/home/wx-bg.png");
      background-size: 100% 100%;
      padding: 23px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        img {
          width: 28px;
          height: 28px;
        }
        span {
          font-weight: 800;
          font-size: 16px;
          color: #141416;
        }
      }
      .desc {
        margin-bottom: 19px;
      }
      .wx {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        background-color: #ffffff;
        padding: 3px 3px 4px 4px;
        border-radius: 4px;
        img {
          width: 148px;
          height: 148px;
        }
      }
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 15px;
        color: #333333;
      }
    }
  }
}

#videoBack {
  width: 100%;
  position: absolute;
  top: 0;
  height: 445px;
  overflow: hidden;
  // transform: scale(1.2);
  z-index: 0;
  // &.henanCehui {
  //   height: 265px;
  // }
  video {
    width: auto;
    min-height: 450px;
    z-index: 0;
  }
}
#top {
  height: 47px;
  width: 100%;
  // background: url("../../assets/home/top.png") no-repeat;
  background-size: 100% 57px;
}
#top {
  height: 57px;
  width: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  margin-top: 42px;
  &.henanCehui {
    position: relative;
    justify-content: flex-end;
  }
  img {
    height: 54px;
    width: auto;
  }
  #campusEntrance {
    position: absolute;
    right: 30px;
    font-size: 15px;
    color: white;
    cursor: pointer;
  }
}
#app-container {
  width: 100%;
  min-width: 1000px;
  // max-height: calc(100vh + 177px);
  display: flex;
  // background: url("../../assets/home/back.png") no-repeat;
  background-color: #333e68;
  flex-direction: column;
  background-size: 100% auto;
  align-items: center;
  padding-bottom: 10px;
  // overflow-y: hidden;
  .experience-time {
    // width: 253px;
    height: 28px;
    z-index: 7;
    position: fixed;
    top: 18px;
    right: 110px;
    // background-color: red;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #ffffff;
    .time {
      margin-left: 9px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .time-box {
        width: 56px;
        height: 28px;
        padding: 4px 8px; /* 内边距 */
        border: 1px solid #5e6d84; /* 边框 */
        border-radius: 4px; /* 圆角 */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 阴影 */
        margin: 0 4px;
        font-family: D-DIN-PRO-500-Medium;
        font-weight: bold;
        font-size: 15px;
        color: #ffffff;
      }
      .dot {
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        div {
          width: 4px;
          height: 4px;
          background: #ffffff;
          border-radius: 50%;
        }
      }
    }
  }
  .right-110 {
    right: 110px;
  }

  .right-24 {
    right: 24px;
  }
  #title {
    left: 0;
    top: 0;
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 57px;
    background-color: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    padding-left: 25px;
    z-index: 6; //很重要 不要随便改
    font-family: "title-home-font";
    color: #fff;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 2px;
    .titleCustomerName {
      // max-width: 22vw;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      height: 28px;
    }
    img {
      margin-right: 8px;
      height: 28px;
      width: auto;
    }
  }
  .topTitle {
    font-family: "title-home-font";
    color: #fff;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 2px;
    width: 100%;
    display: flex;
    margin-top: 0px;
    align-items: center;
    z-index: 10;
    margin-top: -84px;
    margin-bottom: 4px;
    padding-left: 18px;
    .pic {
      height: 38px;
      margin-right: 7px;
      margin-top: 6px;
    }
  }
  .topDesc {
    font-family: "title-home-font";
    color: #fff;
    font-size: 32px;
    line-height: 28px;
    letter-spacing: 2px;
    width: 100%;
    display: flex;
    margin-top: 0px;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-top: 8px;
    // margin-bottom: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .pic {
      width: 38px;
      height: 38px;
      margin-right: 10px;
      margin-top: 8px;
    }
  }
  // .henanSerchBoxContainer {
  //   position: sticky;
  //   top: 0;
  //   // height: 110px;
  //   z-index: 2;
  //   margin-top: 26px;
  //   ::v-deep .search-box {
  //     margin-top: 10px;
  //   }
  // }
  .ylTitle {
    font-size: 24px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #7f9dc9;
    line-height: 36px;
  }
  .main-tabs {
    width: 100%;
    position: relative;
    display: flex;
    z-index: 4;
    padding: 0 14px;
    &::before {
      display: flow-root;
      position: absolute;
      top: -27px;
      left: 0;
      content: "";
      width: 100%;
      height: 124px;
      z-index: -1;
      background-image: url("../../assets/home/filterBeforeBG.png");
    }
    .main-tabs-item {
      position: relative;
      display: flex;
      justify-content: center;
      height: 66px;
      border-radius: 10px;
      padding: 14px 20px 0;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: -12px;
      // margin-right: 30px;
    }
    .main-tabs-item-active {
      color: #e9f0f1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(1.5px);
    }
    .main-tabs-item-text {
      display: flex;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
    .gradient-border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* Ensure the SVG doesn't block clicks */
    }
  }
  .main {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 0 14px;
    // flex-direction: row-reverse;
    // width: 98.4%;
    width: 100%;
    &.civilMain {
      ::v-deep.hot-list {
        max-height: calc(100vh - 490px);
        overflow-y: auto;
        &::-webkit-scrollbar-track-piece {
          display: none;
        }

        &::-webkit-scrollbar {
          display: none;
        }

        &::-webkit-scrollbar-thumb {
          display: none;
        }
      }
      // .jobSearchSideContainer {
      //   max-height: calc(100vh - 205px);
      // }
    }
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}

.question {
  z-index: 999;
  position: fixed;
  right: 0;
  top: 85%;
  transform: translateY(-50%);
  height: 110px;
  width: 42px;
  background: #fff;
  box-shadow: -7px 2px 15px 0px rgba(0, 0, 0, 0.08);
  border-radius: 12px 0px 0px 12px;
  display: flex;
  flex-direction: column;
  color: #555555;
  font-size: 9px;
  transition: 0.5s all;
  cursor: pointer;
  .part {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: auto;
    justify-content: center;
    align-items: center;
    & ~ .part {
      border-top: 1px solid #e8e8e9;
    }
  }
  span {
    transition: 0.5s all;
    height: 8px;
    white-space: nowrap;
    transform: scale(0.8);
  }
  img {
    transition: 0.5s all;
    margin: 6px;
    width: 22px;
    height: 22px;
  }
}
.question:hover {
  width: 67px;
  height: 150px;
  span {
    height: 15px;
    transform: scale(1);
  }
  img {
    margin: 8px;
    width: 30px;
    height: 30px;
  }
}
.updateMessage {
  white-space: pre-line;
  line-height: 24px;
}
::v-deep .el-menu {
  input {
    border-radius: 18px;
  }
}
::v-deep .questionDialog.el-dialog {
  height: 323px;
  border-radius: 12px;
  background-image: url("../../assets/home/questionBack.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  .el-dialog__header {
    padding: 32px 36px 0 36px;
    .el-dialog__title {
      font-size: 20px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #222222;
      line-height: 28px;
    }
  }
  .el-dialog__body {
    padding: 13px 36px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    .erweimaBox {
      width: 100%;
      padding: 26px 0 18px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 133px;
        height: 133px;
        margin: 0 44px;
      }
    }
    .erweimaName {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        margin: 0 90px;
        font-size: 14px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #080808;
      }
    }
  }
}
.collectDialog {
  ::v-deep .el-dialog {
    height: 500px;
    background-image: linear-gradient(
      180deg,
      #d0e3ff 0%,
      #f1f4f9 10%,
      #f1f4f9 100%
    );
  }
}
.edit {
  color: #f45050;
  font-size: 15px;
  position: relative;
  width: 100%;
  height: 1;
  p {
    cursor: pointer;
    border-radius: 10px;
    background: rgba(244, 80, 80, 0.1);
    padding: 5px 10px;
    position: absolute;
    right: 50px;
    bottom: 5px;
    font-weight: 600;
  }
}
.collectList {
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}
::-webkit-scrollbar {
  width: 4px;
  background-color: #f1f4f9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(207, 216, 230, 1);
  border-radius: 2px;
}

.careerItem {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  height: 108px;
  width: 31.3%;
  margin: 1%;
  background: #fff;
  border-radius: 9px;
  transition: 0.2s ease-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  &:hover {
    border-color: #0b6eff;
    transform: translateY(-10%);
    .careerName {
      color: #0b6eff;
    }
    .careerCategory {
      background: #0b6eff;
      color: #fff;
    }
  }
  .careerName {
    height: 52px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #222222;
    display: flex;
    align-items: center;
    line-height: 22px;
    padding-left: 15px;
    padding-right: 40px;
    position: relative;
    transition: all 0.5s;
    .collect {
      position: absolute;
      width: 18px;
      height: 18px;
      right: 12px;
    }
  }
  .careerCate {
    padding-left: 15px;
    padding-bottom: 5px;
  }
  .careerCategory {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 15px;
    width: 100%;
    height: 36px;
    background: linear-gradient(
      276deg,
      rgba(218, 240, 247, 0.1) 0%,
      rgba(230, 240, 255, 0.3) 100%
    );
    border-radius: 0px 0px 6px 6px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9cabb7;
    line-height: 20px;
    // transition: all 0.5s;
    div {
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.careerItemRed {
  .careerName {
    position: relative;
  }
  .del {
    position: absolute;
    right: 20px;
    font-size: 22px;
    margin-bottom: 10px;
  }
  &:hover {
    border-color: #f45050;
    transform: translateY(-10%);
    .careerName {
      color: #f45050;
    }
    .careerCategory {
      background: #f45050;
      color: #fff;
    }
  }
}
</style>
